<!DOCTYPE html>
<html>
<head lang="zh">
    <!--UTF-8 页面呈现为中文-->
    <meta charset="UTF-8">
    <title>Bootstrap 课程实例</title>
    <meta content="课程教学实例" name="Description">
    <meta content="bootstrap 前端学习 css" name="Keywords">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 将360默认为极速模式打开-->
    <meta name="renderer" content="webkit">
    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!--导航-->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
           <a class="brand" href="#">Title</a>
           <ul class="nav">
               <li class="active"><a href="./index.html">首页</a></li>
               <li><a href="#">起步</a></li>
               <li><a href="#">脚手架</a></li>
               <li><a href="#">脚手架</a></li>
               <li><a href="#">基本CSS样式</a></li>
               <li><a href="#">组件</a></li>
               <li><a href="#">JavaScript插件</a></li>
               <li><a href="#">定制</a></li>
               <li><a href="#">网站实例</a></li>
           </ul>
        </div>
    </div>
</nav>
<!--页头-->
<header>
    <div class="container" style="text-align:center">
       <h1 style="margin-top:137px">Bootstrap</h1>
       <p>简介、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
       <p>
           <div>
             <button class="btn btn-primary btn-large" >下载Bootstrap</button>
           </div>
       </p>
       <p>
           <a href="#">GitHub Project</a>
           <a href="#">案例</a>
           <a href="#">扩展</a>
           Version 2.3.2
       </p>
       <p>
           <a href="#">Bootstrap v3 中文文档</a>
       </p>
    </div>
</header>
<!--正文-->
<article>
    <div class="container" style="text-align:center; margin-top:200px">
       <div class="row">
           <div class="span12" style="margin-bottom:30px">
              <h1>Bootstrap介绍。</h1>
              <p>
                  需要为爱上Bootstrap找N多理由吗？就在眼前。
              </p>
           </div>
           <div class="span4">
               <img src="./img/bs-docs-twitter-github.png"/>
               <p>
                   <h3>人人为我，我为人人。</h3><a href=""></a>
               </p>
               <a>
                   由<a href="#">@mdo</a> 和 <a href="#">@fat</a> 在Twitter工作时创建，
                   Bootstrap使用 <a href="#">LESS CSS</a> 并用 <a href="#">Node</a> 编译，
                   托管在 <a href="#">GitHub</a> 上，方便大家使用这一框架构建更好的web应用。
               </p>
           </div>
           <div class="span4">
               <img src="./img/bs-docs-responsive-illustrations.png"/">
               <p>
                   <h3>任何人都可以使用。</h3>
               </p>
               <p>
                   Bootstrap不光为了看起来好看，而且在现代的桌面浏览器上有极佳的表现(包括IE7！)。
                   在平板电脑和智能手机上面还有 <a href="#">响应式CSS</a> 可以使用。
               </p>
           </div>
           <div class="span4">
               <img src="./img/bs-docs-bootstrap-features.png"/>
               <p>
                   <h3>丰富的特色。</h3>
               </p>
               <p>
                   12列的响应式<a href="#">栅格结构</a>、丰富的组件、<a href="#">JavaScript插件</a>、排版、表单控件，
                   还有 <a href="#">基于web的定制工具</a>。
               </p>
           </div>
       </div>
        <div class="row" style="margin-top:100px">
            <div class="span12">
              <h1>基于Bootstrap构建的网站。</h1>
              <p>
                  更多基于Bootstrap构建的网站列表，请访问 <a href="#">优站精选</a> 或者 <a href="#">看看下面的几个案例</a>。
              </p>
            </div>
            <div class="span3" style="margin-top:30px">
                <img src="./img/f9c2f01fad1f23574156e0577a06c.jpg"/>
            </div>
            <div class="span3" style="margin-top:30px">
                <img src="./img/2b88de566722366fffbb12ca7803a.jpg"/>
            </div>
            <div class="span3" style="margin-top:30px">
                <img src="./img/8ac1e8d1c0bd6f8312afbacc52750.jpg"/>
            </div>
            <div class="span3" style="margin-top:30px">
                <img src="./img/94a9c497c47468f8654ecab841247.jpg"/>
            </div>
        </div>
    </div>
</article>
<!--页脚-->
<footer>
    <div class="container" style="text-align:center; margin-top:80px">
        <p>Designed and built with all the love in the world by <a href="#">@mdo</a> and <a href="#">@fat</a>.</p>

        <p>Code licensed under <a href="#">Apache License v2.0</a>, documentation under <a href="#">CC BY 3.0</a>.</p>

        <p><a href="#">Glyphicons Free</a> licensed under <a href="#">CC BY 3.0</a>.</p>
        
        <p><a href="#">Blog</a>    <a href="#">Issues</a>    <a href="#">Changelog</a></p>
    </div>
</footer>

<script src="http://code.jquery.com/jquery.js"></script>
<script src="//cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>

</body>
</html>